<template>
    <div class="maincontent">
        <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
                <div style="padding:4px;">



                    <el-form :inline="true" label-position="left" :model="formData" ref="form" label-width="80px" :rules="formDataRules">
                        <div class="maintitle" style="margin-top:40px;">申请规划设计</div>
                        <div class="formcontent">
                            <el-form-item label="土地请查费：" prop="landCheckFee" label-width="170px">
                                <el-input style="width:200px;" v-model="formData.landCheckFee">
                                  <i slot="suffix">万元</i>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="可行性研究费：" prop="feasibilityStudyFee" label-width="170px">
                                <el-input style="width:200px;" v-model="formData.feasibilityStudyFee">
                                  <i slot="suffix">万元</i>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="项目踏勘费：" prop="projectSurveyFee" label-width="170px">
                                <el-input style="width:200px;" v-model="formData.projectSurveyFee">
                                  <i slot="suffix">万元</i>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="规划设计与预算编制费：" prop="designBudgetFee" label-width="170px">
                                <el-input style="width:200px;" v-model="formData.designBudgetFee">
                                  <i slot="suffix">万元</i>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="规划设计申请书：" label-width="170px" prop="planningDesignFileId">
                                <el-upload
                                    class="upload-demo"
                                    :action="uploadUrl"
                                    :file-list="fileList"
                                    :on-success="uploadFileSuccess"
                                    :limit="1"
                                    >
                                    <el-button size="small">上传</el-button>
                                </el-upload>
                            </el-form-item>
                        </div>
                    </el-form>
                    <el-form :model="examineOpinion" :inline="true" ref="opinionForm" :rules="opinionRules">
                        <div class="maintitle" style="margin-top:60px;">申请规划设计区县意见</div>
                        <div class="formcontent">
                            <el-form-item label="区县中心审查意见" prop="opinion" label-width="140px" style="display:block;">
                                <el-input style="width:1000px;" type="textarea" v-model="examineOpinion.opinion" rows="5">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="审查人" style="margin-right:60px;" prop="signature">
                                <el-image style="width: 120px; height: 60px" :src="signature"></el-image>
                            </el-form-item>
                            <el-form-item label="审查日期" prop="createTime">
                              <el-date-picker v-model="examineOpinion.createTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="审查意见" prop="status">
                                <el-select v-model="examineOpinion.status" placeholder="请选择">
                                    <el-option label="同意" :value="0"></el-option>
                                    <el-option label="拒绝" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                        <div style="margin-top:40px;">
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                                <el-button>取消</el-button>
                        </div>

                </div>

            </el-tab-pane>
            <el-tab-pane label="审查流程" name="second">
                <process :processData="processData"></process>
            </el-tab-pane>
        </el-tabs>




    </div>
</template>

<script>
import process from "../public/process"
import { getRegPlanningDesignDetail, saveRegPlanningByCountry, examineOpinionList } from '@/api/plannDesign/application'
import { getInfo } from '@/api/user'
import config from '@/config/'
export default {
    components:{
        process:process
    },
    data() {
        return {
            uploadUrl: config.uploadUrl, // 上传通用接口
            fileList: [],
            user: {}, // 当前登录用户
            formData:{
                landCheckFee: '',
                feasibilityStudyFee: '',
                projectSurveyFee: '',
                designBudgetFee: '',
                planningDesignFileId: '',
                examineOpinion: {}
            },
            examineOpinion: { // 审核意见
                groupId: 3,
                type: 0,
                opinion: "",
                signature: "",
                status: 1,
                createTime: ''
            },
            projectId: 1,
            activeName:"first",
            processData: config.reviewProcessList[3], // 流程信息
            fileList:[],
            formDataRules: {
                landCheckFee: [{require: true,
                    validator: (rule, value, callback) => {
                      const v = Number(value)
                      if(isNaN(v) || value == '') {
                          callback(new Error("请输入正确费用"))
                      }
                      callback()
                    }, trigger: 'blur'}],
                feasibilityStudyFee: [{require: true,
                    validator: (rule, value, callback) => {
                        const v = Number(value)
                        if(isNaN(v) || value == '') {
                            callback(new Error("请输入正确费用"))
                        }
                        callback()
                    }, trigger: 'blur'}],
                projectSurveyFee: [{require: true,
                    validator: (rule, value, callback) => {
                        const v = Number(value)
                        if(isNaN(v) || value == '') {
                            callback(new Error("请输入正确费用"))
                        }
                        callback()
                    }, trigger: 'blur'}],
                designBudgetFee: [{require: true,
                    validator: (rule, value, callback) => {
                        const v = Number(value)
                        if(isNaN(v) || value == '') {
                            callback(new Error("请输入正确费用"))
                        }
                        callback()
                    }, trigger: 'blur'}],
                planningDesignFileId: [{require: true, validator: (rule, value, callback) => {
                        const v = Number(value)
                        console.log(v)
                        if(isNaN(v) || value == '') {
                            callback(new Error("请上传文件"))
                        }
                        callback()
                    },
                    trigger: 'change'}],
            },
            opinionRules: {
                opinion:  [{require: true,
                    validator: (rule, value, callback) => {
                        if(value.length < 1 || value.length > 200) {
                            callback(new Error("请输入意见"))
                        }
                        callback()
                    }, trigger: 'blur'}],
                createTime: [{require: true,
                    validator: (rule, value, callback) => {
                        if(value.length < 1 || value.length > 200) {
                            callback(new Error("请选择时间"))
                        }
                        callback()
                    }, trigger: 'blur'}]
            }
        };
    },
    computed: {
      signature () {
          return `${config.baseUrlImg}${this.user.signedPhoto}`
      }
    },
    created() {
      this._initData()
    },
    methods: {
        onSubmit(){

            let formValid = false
            let opinionValid = false
            this.$refs['form'].validate(valid => {
                formValid = Boolean(valid)
            })
            this.$refs['opinionForm'].validate(valid => {
                opinionValid = Boolean(valid)
            })
            if (formValid && opinionValid) {
                this.formData.examineOpinion = this.examineOpinion
                const data = Object.assign(this.formData, {projectId: this.projectId})
                saveRegPlanningByCountry(data).then(res=> {
                    this.$message.success("操作成功！");
                })
            }
        },
        uploadFileSuccess(res, file, fileList){
            this.formData['planningDesignFileId'] = res.data.id
            this.$refs['form'].validate(valid => {});
        },
        // 初始化数据
        _initData () {
            this._getHistoryData()
            this._getProcessList()
        },
        // 审查流程/审查意见数据获取
        _getProcessList () {
            examineOpinionList({groupId: this.examineOpinion.groupId, projectId: this.projectId}).then(res => {
                  if(res.data.length > 0) { // 审核意见
                     const inx = res.data.findIndex( item => {
                          return item.type == this.examineOpinion.type
                      })
                      this.examineOpinion = res.data [inx]
                  }
                  // 流程数据获取
                  let processList = this.processData.slice()
                  for (let i=0; i < processList.length; i++) {
                      let temp = { // 审查流程初始化
                          isReview: false,
                          institutions: processList[i],
                          status: 0,
                          people: '',
                          date: '',
                          advice: ''
                      }
                      if (res.data[i]) { // 判断是否存在已走流程
                        const item = res.data[i]
                        temp.isReview = true
                        temp.groupId = item.groupId
                        temp.type = item.type
                        temp.status = item.status
                        temp.people = `${config.baseUrlImg}${item.signature}`
                        temp.date = item.createTime
                        temp.advice = item.opinion
                      }
                      processList[i] = temp
                  }
                  this.processData = processList
            })
        },
        // 历史数据
        _getHistoryData() {
            getRegPlanningDesignDetail(this.projectId).then(res => {
                console.log(res)
                if (res.data) {
                  this.formData = res.data
                    if(res.data.planningDesignFileId == null) {
                        this.formData.planningDesignFileId = ""
                    }
                    if (res.data.planningDesignFile) {
                        let file = {}
                        file['url'] = res.data.planningDesignFile['filePath']
                        file['name'] = res.data.planningDesignFile['fileName']
                        this.fileList.push(file)
                    }
                    this._numToString(this.formData)
                }
            })
            getInfo().then(res => {
                this.user = res.data
            })
        },
        // 把对象内的number转为string
        _numToString(obj) {
            for (let i in obj) {
                if (obj[i] === null) {
                    obj[i] = ""
                }
                if (typeof obj[i] === 'number') {
                  obj[i] = String( obj[i])
                }
            }
            return obj
        }
    }
};
</script>
<style lang="scss" scoped>
  /deep/ .el-input__suffix-inner {
    i {
      font-style: normal;
    }
  }
</style>
<style lang="scss" scoped>
    .maincontent{
        margin: 10px;
        box-sizing: border-box;
        background: #ffffff;
        padding: 20px;
        .maintitle{
            font-size:18px;
            font-family:PingFang SC;
            font-weight:bold;
            line-height:25px;
            color: #4d4d4d;
        }
        .investmentmsg{
            .totalInvestment{
                width: 250px;
                height: 160px;
                margin-right: 30px;
                float: left;
                position: relative;
                margin-top: 15px;
                .contentbox{
                    width: 242px;
                    height: 100%;
                    background: #F6A924;
                    .title{
                        font-size:14px;
                        font-family:PingFang SC;
                        font-weight:500;
                        line-height:20px;
                        margin-left: 30px;
                        padding-top: 30px;
                        color: #ffffff;
                    }
                    .value{
                        font-size:40px;
                        font-family:PingFang SC;
                        font-weight:bold;
                        line-height:56px;
                        margin-top: 14px;
                        color: #ffffff;
                        text-align: center;
                        span{
                            font-size:13px;
                            font-family:PingFang SC;
                            font-weight:500;
                            line-height:18px;
                        }
                    }
                }
                .youjiantou{
                    position: absolute;
                    width:0;
                    height:0;
                    border-width:30px 0 30px 30px;
                    border-style:solid;
                    border-color:transparent transparent transparent #F6A924;
                    right: 0;
                    top: 50%;
                    margin-top: -30px;
                }
            }
            .childInvestment{
                width: 480px;
                height: 160px;
                float: left;
                margin-top: 15px;
                .leftbox{
                    width: 240px;
                    height: 160px;
                    float: left;
                    border-radius: 4px;
                    .title{
                        font-size:14px;
                        font-family:PingFang SC;
                        font-weight:500;
                        line-height:20px;
                        margin-left: 30px;
                        padding-top: 30px;
                        color: #ffffff;
                    }
                    .value{
                        font-size:40px;
                        font-family:PingFang SC;
                        font-weight:bold;
                        line-height:56px;
                        margin-top: 14px;
                        color: #ffffff;
                        text-align: center;
                        span{
                            font-size:13px;
                            font-family:PingFang SC;
                            font-weight:500;
                            line-height:18px;
                        }
                    }
                }
                .rightbox{
                    width: 240px;
                    height: 160px;
                    float: left;
                    padding-top: 20px;
                    padding-left: 30px;
                    background: #F3F6F8;
                    border-radius: 4px;
                    .item-content{
                        font-size:13px;
                        font-family:PingFang SC;
                        font-weight:500;
                        line-height:18px;
                        color: #969899;
                        margin-bottom: 7px;
                    }
                }
            }
        }



        .formcontent{
            margin-top: 30px;
            .secondtitle{
                font-size:14px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:20px;
                color: #666666;
                span{
                    font-size:13px;
                    font-family:PingFang SC;
                    font-weight:500;
                    line-height:18px;
                    margin-right: 30px;
                    color: #a6a6a6;
                }
            }
            .purchaseExpense{
                margin-top: 20px;
                font-size:14px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:20px;
                color: #666666;
                span{
                    font-size:14px;
                    font-family:PingFang SC;
                    font-weight:500;
                    line-height:20px;
                    color: #a6a6a6;
                    margin-right:60px;
                }
            }
            .allInvestment{
                font-size:14px;
                font-family:PingFang SC;
                font-weight:bold;
                line-height:20px;
                margin-top: 20px;
                color: #333333;
                span{
                    font-weight: 500;
                }
            }
        }
        .construction{
            padding-top: 10px;
            .item1{
                margin-top: 20px;
                .title{
                    font-size:14px;
                    font-family:PingFang SC;
                    font-weight:500;
                    line-height:20px;
                    color: #666666;
                    float: left;
                    width: 160px;
                    text-align: right;
                }
                .value{
                    float: left;
                    font-size:14px;
                    font-family:PingFang SC;
                    font-weight:500;
                    line-height:20px;
                    color: #a6a6a6;
                }
            }
        }
    }
</style>
